<template>
	<div class="pc-zk-file-manage">
		<div class="frame-head">
			<div class="reminder_intor"><i class="el-icon-warning"></i>可将视频拖拽至下方视频区域上传</div>
			<div class="rightinput">
				<div class="upload-demoss">
					<div class="bostudias">
						<a class="bostudias_a1">
							<el-button style='' @click.native="upload" type="danger" icon="search"> 上传</el-button>
							<div class="upload-box" v-if="uploadDialogVisible" ref="uploadbox">
								<div class="tobu_box">
									<div class="upload_top" @mousedown="drag($event)">
										<i class="icon iconfont icon-ziyuan iconziyuan"></i>
										多文件上传
									</div>
									<div class="floatright" @click="closeUploadForm">
										<i class="el-dialog__close el-icon el-icon-close"></i>
									</div>
								</div>
								<div class="spring-blk">
									<el-upload :action="$ala.clientUploadApi()+'?fileType=3'" :before-upload="beforeUpload" :data="fileData" :on-success="uploadSuccess" multiple :headers="$ala.header('Api/StorageFile/upload')">
										<el-button size="small" type="primary">点击上传</el-button>
									</el-upload>
									<el-upload class="upload-demo" drag :action="$ala.clientUploadApi()+'?fileType=3'" multiple :on-success="uploadSuccess" :headers="$ala.header('')">
										<i class="el-icon-upload"></i>
										<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
									</el-upload>
									<div class="show_uploadimg">
										<div>
											<img class="uploadimg_img" :src="$ala.imgHost+imgItem" alt="" v-for="(imgItem,imgIndex) in uploadingImages" :key="imgIndex">
										</div>
									</div>
								</div>
							</div>
						</a>
						<a class="bostudias_a2">
							<i class="icon iconfont icon-shixiangxiajiantou- icon3"></i>
						</a>
					</div>
				</div>
				<el-input style='width:222px;' placeholder="搜索" prefix-icon="el-icon-search" v-model="searchModel.keyword" class="right_mar"></el-input>
				<el-button style='' @click.native="search(1)" type="primary" icon="search"> 搜索</el-button>
			</div>
		</div>
		<div class="file_content">
			<el-upload :action="$ala.clientUploadApi()+'?fileType=3'" drag multiple :on-success="uploadSuccess" :show-file-list="false">
				<ul class="file_content_ul" v-if="barTitleSelectIndex ===0" v-loading="loading">
					<li class="file_content_li" v-for="(itemImage,imageIndex) in imageListViewModel" :key="imageIndex" @click.stop="fromUpload(itemImage)" :class="{'textlihover':hoverIndex==imageIndex}">
						<div class="matter_box">
							<div class="text-imgsbox" @click.stop="selectImage(itemImage,imageIndex)">
								<img :src="$ala.urlImage(itemImage.path)" v-lazy />
							</div>
						</div>
						<div class="text-p">{{itemImage.name}}</div>
						<div class="remove_but">
							<div class="but1" @click="copyImageUrl($ala.urlImage(itemImage.path))" style="color:#ffffff">复制</div>
							<div class="but2" @click="deleteImage(itemImage.id)">删除</div>
						</div>
					</li>
				</ul>
			</el-upload>
		</div>
		<div class="manage_pagina">
			<el-pagination background v-if="barTitleSelectIndex===0" :current-page="searchModel.pageIndex" @current-change="search" :page-size="searchModel.pageSize" @size-change="changeSearchSize" :page-sizes="[36, 100, 200, 500]" layout="total,prev, pager, next,sizes, jumper" :total="totalCount">
			</el-pagination>
		</div>
	</div>
</template>
<script>
	import service from './service'
	import upload from './upload'
	import ala from 'ala'
	export default {
		props: ['type', 'isTenant'],
		data() {
			return {
				uploadType: false,
				loading: false,
				barTitles: [], // 标题栏
				hoverIndex: null,
				barTitleSelectIndex: 0,
				systemBackGroundImageList: [],
				uploadingImages: [], // 正在上传的视频显示
				imageListViewModel: [],
				searchModel: {
					keyword: '',
					pageIndex: 1,
					pageSize: 36
				},
				totalCount: 0,
				uploadDialogVisible: false, // 是否显示音频上传
				imageUrl: '',
				headers: {

				},
				fileData: {
					fileType: 3
				}
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			chooseTitleBar(index) {
				this.barTitleSelectIndex = index
			},
			upload() {
				upload.upload(this)
			},
			fromUpload(val) {
				this.imageUrl = val.path
				this.$emit('saveImage', this.imageUrl)
			},
			async init() {
				this.headers = {
					'zk-tenant': this.$ala.tenant()
				}
				await service.search(this)
			},
			// 限制上传文件
			beforeUpload(file) {
				var isVideo = upload.beforeUpload(file)
				if (isVideo) {
					return true
				} else {
					this.$message.warning('暂时仅支持amr、 mp3、m4a格式的音频文件上传')
					return false
				}
			},
			async search(pageIndex) {
				this.searchModel.pageIndex = pageIndex
				this.imageListViewModel = []
				await service.search(this)
			},
			async changeSearchSize(pageSize) {
				this.searchModel.pageSize = pageSize
				await this.search(1)
			},
			uploadSuccess(res, file) {
				if (res) {
					this.$message.success('上传成功')
					this.uploadingImages.push(res.path)
					// this.init()
					this.search(1)
				} else {
					this.$message.error('上传失败，请重新上传')
				}
			},
			closeUploadForm() {
				this.uploadDialogVisible = false
			},
			// 选择视频
			selectImage(image, Indeximg) {
				this.hoverIndex = Indeximg
				this.$emit('selectFileChildEvent', image)
			},
			// 拖动文件上传框
			drag(e) {
				upload.drag(this, e)
			},
			async deleteImage(id) {
				service.delete(this, id)
			},
			copyImageUrl(url) {
				service.copyImageUrl(this, url)
			},
			colseFileManger() {
				this.$emit('fileManagerClose', false)
			}
		}
	}
</script>
<style rel="stylesheet/scss" lang="scss">
	@import "./style.scss";
</style>